<template>
  <div>
    <h1>管理员借款列表</h1>
    借款名称:<input type="text" v-model="state.B_Name">
    利息:<select v-model="state.BL_Id">
        <option value="">请选择</option>
        <option :value="item.BL_Id" v-for="item in lists">{{item.BL_Number*100}}%</option>
      </select>
      <input type="button" value="查询" @click="show"/>
    <table>
      <tr>
        <td @click="pai">借款ID</td>
        <td>借款名称</td>
        <td>借款最高金额</td>
        <td>借款年限</td>
        <td>利息</td>
        <td>借款简介</td>
        <td>借款发布时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{ item.B_Id }}</td>
        <td>{{ item.B_Name }}</td>
        <td>{{ item.B_Money }}</td>
        <td>{{ item.B_Year }}</td>
        <td>{{ item.BL_Number*100 }}%</td>
        <td>{{ item.B_Info }}</td>
        <td>{{ item.B_Date.substr(0,10) }}</td>
        <td></td>
        <td>
          <slot :data="item.B_Id"></slot>
          <!-- <input type="button" value="删除" @click="isdel(item.B_Id)"/> -->
        </td>
      </tr>
    </table>
    共<span>{{pcount}}</span>页
    共<span>{{count}}</span>条
    每页<span>{{state.pageSize}}</span>条
    当前<span>{{state.pageIndex}}</span>/<span>{{pcount}}</span>页 
    <input type="button" value="首页" @click="page('shou')" />
    <input type="button" value="上一页" @click="page('shang')" />
    <input type="button" value="下一页" @click="page('xia')" />
    <input type="button" value="尾页" @click="page('wei')" /> 
    <input type="text" v-model="state.pageIndex">
    <input type="button" value="Go" @click="show">
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

let data: any = reactive({
  state: {
    B_Name:'',
    BL_Id:'',
    pageIndex:1,
    pageSize:2,
    s:false
  },
  count: 0,
  pcount: 0,
  list: [],
  lists:[]
});

let { state, list, count, pcount,lists } = toRefs(data);

onMounted(() => {
  show();
});

// const jie=(B_Id:any)=>{
// router.push({
//   path:'/jiekuan',
//   query:{
//     B_Id:B_Id
//   }
// })
// }

// //删除
// const isdel=(B_Id:any)=>{
//   const f=confirm('确认删除吗？');
//   if(f){
//     axios({
//       url:'/api/Borrow/GetDel',
//       method:'get',
//       params:{
//         B_Id:B_Id
//       }
//     })
//     .then(res=>{
//       if(res.data.data==-1){
//         alert('有人借款不能删除');
//         return;
//       }
//       else{
//         alert('删除成功');
//         show()
//       }
//     })
//   }
// }

//排序
const pai=()=>{
  if(state.value.s==false){
    state.value.s=true
  }
  else{
    state.value.s=false
  }
  show()
}

//显示功能
const show = () => {
  axios({
    url: '/api/Borrow/GetBorrowShow',
    method: 'get',
    params: state.value,
  })
    //理财显示
    .then((res) => {
      list.value = res.data.data.plist;
      count.value = res.data.data.count;
      pcount.value = res.data.data.pcount;
    })
    //异常处理
    .catch((err) => {
      console.log(err);
    });
};

//分页
const page = (str: any) => {
  switch (str) {
    case 'shou':
      if (state.value.pageIndex == 1) {
        alert('已经是首页了');
        state.value.pageIndex = 1;
      }
      state.value.pageIndex = 1;
      break;
    case 'shang':
      if (state.value.pageIndex == 1) {
        alert('已经是第一页了');
        state.value.pageIndex = 1;
      }
      state.value.pageIndex--;
      break;
    case 'xia':
      if (state.value.pageIndex == pcount.value) {
        alert('已经是最后一页了');
        state.value.pageIndex = pcount.value;
      }
      state.value.pageIndex++;
      break;
    case 'wei':
      if (state.value.pageIndex == pcount.value) {
        alert('已经是尾页了');
        state.value.pageIndex = pcount.value;
      }
      state.value.pageIndex = pcount.value;
      break;
  }
  show();
};

onMounted(()=>{
  getData()
})

const getData=()=>{
  axios({
    url:'/api/Borrow/LiXi',
    method:'get'
  })
  .then(res=>{
    console.log(res.data);
    lists.value=res.data.data
  })
}
</script>

<style scoped></style>
